<template>
  <div>
    <a-flex vertical gap="small" justify="center">
      <a-button type="primary" @click="addSetting" style="width: fit-content"
      >新增设置
      </a-button
      >

      <a-list
          item-layout="horizontal"
          :data-source="settings"
          v-if="settings.length"
      >
        <template #renderItem="{ item }">
          <a-list-item>
            <a-list-item-meta
                :title="item.description"
                :description="item.key"
            />
            <a-popover trigger="hover">
              <template #content>
                <div>{{ item.value }}</div>
              </template>
              <div>{{ item.value.slice(0, 7) }}<span v-if="item.value.length > 7">...</span></div>
            </a-popover>

            <template #actions>
              <a-button type="primary" @click="editSetting(item)"
              >编辑
              </a-button
              >
              <a-button type="primary" danger @click="deleteSetting(item.id)"
              >删除
              </a-button
              >
            </template>
          </a-list-item>
        </template>
      </a-list>
    </a-flex>

    <!-- 编辑/添加设置的模态框 -->
    <a-modal
        :open="isEditing"
        title="新增/编辑设置项"
        @cancel="closeEditModal"
        @ok="handleEdit"
    >
      <a-flex vertical gap="small">
        <span>键名</span>
        <a-input v-model:value="currentSetting.key" placeholder="键名"/>
        <span>值</span>
        <a-flex gap="small" align="center" justify="space-between">
          <a-input v-model:value="currentSetting.value" placeholder="值" type="text"/>
          <DynamicInput
              :input-type="currentSetting.input_type"
              v-model="currentSetting.value"
          />
        </a-flex>
        <span>描述</span>
        <a-input
            v-model:value="currentSetting.description"
            placeholder="描述"
        />
        <span>数值控件类型</span>
        <a-input
            v-model:value="currentSetting.input_type"
            placeholder="数值控件类型"
        />
      </a-flex>
    </a-modal>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import useThemeStore from "@/stores/modules/theme";
import {message} from "ant-design-vue";
import * as home from "@/api/home/index";
import DynamicInput from "@/components/DynamicInput.vue";

const themeStore = useThemeStore();
const settings = ref([]);
const isEditing = ref(false);
const currentSetting = ref({description: "", id: null, key: "", value: "", input_type: ""});
const colorPicker = ref("");
const color = ref(themeStore.theme.token.colorPrimary);
onMounted(() => {
  fetchSettings();
});

// 模拟从 API 获取设置项
const fetchSettings = async () => {
  try {
    const response = await home.getSetting();
    settings.value = response.data;
  } catch (error) {
    message.error("获取设置项失败", error);
  }
};

// 新增设置
const addSetting = () => {
  currentSetting.value = {description: "", id: null, key: "", value: ""};
  colorPicker.value =
      currentSetting.value.key === "themeColor_model";
  isEditing.value = true;
};

const handleEdit = async () => {
  if (currentSetting.value.id) {
    await home.putSetting(currentSetting.value);
  } else {
    await home.addSetting(currentSetting.value);
  }
  if (currentSetting.value.key === "themeColor_model") {
    themeStore.theme.token.colorPrimary = currentSetting.value.value;
  }
  if (currentSetting.value.key === "backgroundImage_model") {
    themeStore.changeBackgroundImage(currentSetting.value.value);
  }
  closeEditModal();
  fetchSettings();
};

// 删除设置
const deleteSetting = async (id) => {
  const res = await home.delSetting(id);
  if (res.code === 204) {
    message.success("删除成功");
    fetchSettings();
  }
};

// 编辑设置项
const editSetting = (item) => {
  colorPicker.value = item.key === "themeColor_model";
  color.value = item.value;
  currentSetting.value = {...item};
  isEditing.value = true;
};

// 关闭编辑模态框
const closeEditModal = () => {
  color.value = "";
  currentSetting.value = {description: "", id: null, key: "", value: "", input_type: ""};
  isEditing.value = false;
};


// 颜色选择器改变
const handleColorChange = (color) => {
  currentSetting.value.value = color;
};
</script>

<style scoped>
</style>
